<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload,
		onHide
	} from '@dcloudio/uni-app';
	import {
		getStudyJuziListApi
	} from "../../../api/request.js"
	const platform = ref({})
	const list = ref(null)
	const fetchList = async (type = true) => {
		try {
			uni.showLoading({
				mask: true
			});
			let res = await getStudyJuziListApi();
			if (!type || !list.value) {
				list.value = [];
			}
			list.value = res.data
			uni.hideLoading();
		} catch (error) {
			console.log(error);
		}
	};
	onShow(async () => {
		platform.value = uni.getStorageSync("platform");
		fetchList()
	});
	const props = defineProps({});
	onMounted(() => {});
	const goback = async () => {
		uni.navigateBack();
	};
	const showPage = (index) => {
		uni.navigateTo({
			url: '/pages/exampleSentence/components/study?id=' + index + '&buyao=false'
		})
	}
</script>

<template>
	<view class="wrap" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 例句 </view>
			<image style="opacity: 0;" class="left" src="/static/img/goback-black.png" mode="widthFix" />
		</view>
		<scroll-view scroll-y="true" :style="{ height: platform.gaodu - platform.dingbu - 96 + 'rpx' }">
			<view class="body ">
				<view @click="showPage(item.sc_id)" class="item uni-row" v-for="(item,index) in list" :key="index">
					<image src="/static/img/user/world/icon1.png" class="icon"></image>
					<view class="text">
						{{item.name}}学习记录
					</view>
				</view>
			</view>
			<view class="footer"> </view>
		</scroll-view>
	</view>
</template>

<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 28rpx;

			.left {
				width: 48rpx;
				margin-right: 32rpx;
			}

			.title {
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.body {
			padding: 0 28rpx;

			.item {
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 16rpx;
				padding: 0 28rpx;

				.icon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 20rpx;
				}

				.text {
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
</style>